<template>
  <div style="background-color:#f6f6f6;">
    <van-nav-bar title="选择地址"  @click-left="back" left-arrow />
    <van-row style="padding:0px 8px">
      <van-radio-group v-model="radio" @change="radios">
        <van-row
          v-for="(item,index) in dzList"
          :key="index"
          style="padding:10px 5px;background-color:#ffffff;margin-top:10px"
        >
          <van-col span="2">
            <!-- <div style="width:15px;height:15px;border:1px solid #f20c59;border-radius:50%"> -->
              <van-radio style="margin:1.5px;" checked-color="#f20c59" :name="item.id" icon-size="12"></van-radio>
            <!-- </div> -->
          </van-col>
          <van-col span="21">
            <van-row>
              <span>{{item.name}}</span>
              <span
                style="margin-left:5px"
              >{{item.tel.substring(0,3)+'****'+item.tel.substring(11,7)}}</span>
            </van-row>
            <van-row style="margin-top:8px;font-size:13px;color:#8b8b8b">
              <span class="span" v-show="item.mor=='T' ? true : false">默认</span>
              {{item.address}}
            </van-row>
            <van-row style="margin-top:20px">
              <van-col span="16"></van-col>
              <van-col span="8" style="float:right">
                <span class="pp" @click="update(item.id)">编辑</span>
                <span class="pp" @click="dele(item.id)">删除</span>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </van-radio-group>
    </van-row>
          <van-button class="address" to='/adddz'>新增地址</van-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio: '',
      dzList: []
    }
  },
  methods: {
    //   返回上一级
    back () {
      this.$router.go(-1)// 返回上一层
    },
    getaddress () {
      this.$http.get('/seladdress').then(res => {
        this.dzList = res.data.data
      })
    },
    // 删除
    dele (id) {
      this.$dialog.confirm({
        message: '您确定删除该地址吗'
      }).then(() => {
        this.$http.delete('/deledz', { params: { id: id } }).then(res => {
          if (res.data.ok === 1) {
            this.$toast('删除成功')
            this.getaddress()
          }
        })
      }).catch(() => {
        // console.log(555)
      })
    },
    // 地址选中
    radios () {
      localStorage.setItem('address_id', this.radio)
      this.$router.push('/order')
    },
    update (id) {
      localStorage.setItem('uptid', id)
      this.$router.push('/uptaddress')
    }
  },
  created () {
    this.getaddress()
    const a = localStorage.getItem('address_id')
    if (a) {
      this.radio = Number(a)
    }
  }
}
</script>

<style scoped>
.van-nav-bar .van-icon {
  color: #333;
  font-size: 25px;
}
.span {
  color: #fa1e7b;
  border: 1px solid #fa1e7b;
  font-size: 12px;
  padding: 0px 5px;
  border-radius: 10%;
}
.pp {
  font-size: 14px;
  padding: 0px 10px;
  border-left: 1px solid #f3f5f6;
}
.address{
    position: fixed;
    bottom: 0px;
    width:100%;
    height: 50px;
    color: white;
    background: linear-gradient(90deg,#fa1e8c,#fc1e56);
    z-index: 999;
}
body{
    background-color:#f6f6f6;
}
</style>
